<template>
    <div id="bar" style="width:500px;height:500px"></div>
</template>
<script>
import * as echarts from 'echarts/core';
import {BarChart} from 'echarts/charts'
import {GridComponent, TooltipComponent} from 'echarts/components'
import {UniversalTransition} from 'echarts/features';
import {CanvasRenderer} from 'echarts/renderers';

echarts.use([
    BarChart,
    GridComponent,
    TooltipComponent,
    UniversalTransition,
    CanvasRenderer
])
export default {
    name: 'About',
    data() {
        return {
            option: {}
        }
    },
    mounted() {
        var chinaDatas = [
            {
                name: '北京',
                value: 86,
            },
            {
                name: '福建',
                value: 65,
            },
            {
                name: '广东',
                value: 53,
            },
            {
                name: '上海',
                value: 48,
            },

            {
                name: '河北',
                value: 20,
            }
        ];

        var yData = [];
        var barData = chinaDatas;
        barData = barData.sort(function (a, b) {
            return b.value - a.value;
        });
        for (var j = 0; j < barData.length; j++) {
            if (j < 10) {
                yData.push('0' + j + barData[j].name);
            } else {
                yData.push(j + barData[j].name);
            }
        }
        console.log(yData, '===ydata')
        this.option = {
            backgroundColor: '#00013a',
            tooltip: {},
            xAxis: {
                show: false
            },
            grid: {
                left: 200,
                top: 80,
                bottom: 20,
                // width: '200',
            },
            yAxis: {
                type: 'category',
                inverse: true,
                nameGap: 16,
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#ddd',
                    },
                },
                axisTick: {
                    show: false,
                    lineStyle: {
                        color: '#ddd',
                    },
                },
                axisLabel: {
                    margin: 200,
                    interval: 0,
                    textStyle: {
                        color: '#fff',
                        align: 'left',
                        fontSize: 20,
                    },
                    rich: {
                        a: {
                            color: '#fff',
                            backgroundColor: '#15AEE6',
                            width: 40,
                            height: 40,
                            align: 'center',
                            fontSize: 20,
                            borderRadius: 2,
                        },
                        b: {
                            color: '#fff',
                            backgroundColor: '#73B9BC',
                            width: 40,
                            height: 40,
                            align: 'center',
                            fontSize: 20,
                            borderRadius: 2,
                        },
                    },
                    formatter: function (params) {
                        if (parseInt(params.slice(0, 2)) < 3) {
                            return ['{a|' + '0' + (parseInt(params.slice(0, 2)) + 1) + '}' + '  ' + params.slice(2)].join('\n');
                        } else {
                            return ['{b|' + '0' + (parseInt(params.slice(0, 2)) + 1) + '}' + '  ' + params.slice(2)].join('\n');
                        }

                    },
                },
                data: ['00北京', '01福建', '02广东', '03上海', '04河北'],
            },
            series: [
                {
                    type: "bar",
                    barGap: "-100%",
                    zlevel: 3,
                    itemStyle: {
                        borderRadius: 4,
                        color: "rgba(112,159,229,0.2)"
                    },
                    data: [100, 100, 100, 100, 100]
                },
                {
                    type: 'bar',
                    zlevel: 2,

                    itemStyle: {
                        color: '#10DADA',
                        borderRadius: 4,
                    },
                    data: barData.sort((a, b) => {
                        return b.value - a.value;
                    }),
                },
            ],
        }
        this.initEcharts()
    },
    methods: {
        initEcharts() {
            let myChart = echarts.init(document.getElementById('bar'))
            myChart.setOption(this.option)
        }
    }
}
</script>
